<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结算页面</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/结算页面.css">
</head>

<body>
    <!-- 顶部开始 -->
    <nav class="top ">
        <a href="#nowhere">
            <span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-home redColor"></span>
            天猫首页
        </a>

        <span>喵，欢迎来天猫</span>

        <a href="#nowhere">tmalltest</a>
        <a href="#nowhere">退出</a>

        <span class="pull-right">
            <a href="#nowhere">我的订单</a>
            <a href="#nowhere">
                <span style="color:#C40000;margin:0px" class=" glyphicon glyphicon-shopping-cart redColor"></span>
                购物车<strong>5</strong>件</a>
        </span>

    </nav>
    <!-- 顶部结束 -->

    <!-- 地址信息开始 -->
    <div class="buyPageDiv">
        <form method="post">

            <div class="buyFlow">
                <img class="pull-left" src="img/site/simpleLogo.png">
                <img class="pull-right" src="img/site/buyflow.png">
                <div style="clear:both"></div>
            </div>
            <div class="address">
                <div class="addressTip">输入收货地址</div>
                <div>

                    <table class="addressTable">
                        <tr>
                            <td class="firstColumn">详细地址<span class="redStar">*</span></td>

                            <td><textarea name="address" placeholder="建议您如实填写详细收货地址，例如接到名称，门牌好吗，楼层和房间号等信息"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>邮政编码</td>
                            <td><input name="post" placeholder="如果您不清楚邮递区号，请填写000000" type="text"></td>
                        </tr>
                        <tr>
                            <td>收货人姓名<span class="redStar">*</span></td>
                            <td><input name="receiver" placeholder="长度不超过25个字符" type="text"></td>
                        </tr>
                        <tr>
                            <td>手机号码 <span class="redStar">*</span></td>
                            <td><input name="mobile" placeholder="请输入11位手机号码" type="text"></td>
                        </tr>
                    </table>

                </div>

            </div>
            <!-- 地址信息结束 -->

            <!-- 订单信息开始 -->
            <div class="productList">
                <div class="productListTip">确认订单信息</div>

                <table class="productListTable">
                    <thead>
                        <tr>
                            <th colspan="2" class="productListTableFirstColumn">
                                <img class="tmallbuy" src="img/site/tmallbuy.png">
                                <a class="marketLink" href="#nowhere">店铺：天猫店铺</a>
                                <a class="wangwanglink" href="#nowhere"> <span class="wangwangGif"></span> </a>
                            </th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>配送方式</th>
                        </tr>
                        <tr class="rowborder">
                            <td colspan="2"></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody class="productListTableTbody">

                        <tr class="orderItemTR">
                            <td class="orderItemFirstTD"><img class="orderItemImg" src="img/productDetail/3752.jpg">
                            </td>
                            <td class="orderItemProductInfo">
                                <a href="#nowhere" class="orderItemProductLink">
                                    洁霸BF522多功能洗地机刷地机酒店家用地毯清洗机 擦地机抛光机
                                </a>

                                <img src="img/site/creditcard.png" title="支持信用卡支付">
                                <img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
                                <img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">

                            </td>
                            <td>

                                <span class="orderItemProductPrice">￥1,235.00</span>
                            </td>
                            <td>
                                <span class="orderItemProductNumber">4</span>
                            </td>
                            <td><span class="orderItemUnitSum">
                                    ￥4,940.00
                                </span></td>

                            <td rowspan="5" class="orderItemLastTD">
                                <label class="orderItemDeliveryLabel">
                                    <input type="radio" value="" checked="checked">
                                    普通配送
                                </label>

                                <select class="orderItemDeliverySelect" class="form-control">
                                    <option>快递 免邮费</option>
                                </select>

                            </td>

                        </tr>

                        <tr class="orderItemTR">
                            <td class="orderItemFirstTD"><img class="orderItemImg" src="img/productDetail/3182.jpg">
                            </td>
                            <td class="orderItemProductInfo">
                                <a href="#nowhere" class="orderItemProductLink">
                                    两轮平衡车双轮儿童思维漂移电动扭扭车智能滑板车成人体感代步车
                                </a>

                                <img src="img/site/creditcard.png" title="支持信用卡支付">
                                <img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
                                <img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">

                            </td>
                            <td>

                                <span class="orderItemProductPrice">￥755.65</span>
                            </td>
                            <td>
                                <span class="orderItemProductNumber">1</span>
                            </td>
                            <td><span class="orderItemUnitSum">
                                    ￥755.65
                                </span></td>

                        </tr>

                        <tr class="orderItemTR">
                            <td class="orderItemFirstTD"><img class="orderItemImg" src="img/productDetail/1917.jpg">
                            </td>
                            <td class="orderItemProductInfo">
                                <a href="#nowhere" class="orderItemProductLink">
                                    依然美佳欧式布艺沙发组合可拆洗新款实木雕花大户型奢华别墅家具
                                </a>

                                <img src="img/site/creditcard.png" title="支持信用卡支付">
                                <img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
                                <img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">

                            </td>
                            <td>

                                <span class="orderItemProductPrice">￥7,008.40</span>
                            </td>
                            <td>
                                <span class="orderItemProductNumber">1</span>
                            </td>
                            <td><span class="orderItemUnitSum">
                                    ￥7,008.40
                                </span></td>

                        </tr>

                    </tbody>

                </table>
                <div class="orderItemSumDiv">
                    <div class="pull-left">
                        <span class="leaveMessageText">给卖家留言:</span>
                        <span>
                            <img class="leaveMessageImg" src="img/site/leaveMessage.png">
                        </span>
                        <span class="leaveMessageTextareaSpan">
                            <textarea name="userMessage" class="leaveMessageTextarea"></textarea>
                            <div>
                                <span>还可以输入200个字符</span>
                            </div>
                        </span>
                    </div>

                    <span class="pull-right">店铺合计(含运费): ￥12,704.05</span>
                </div>

            </div>

            <div class="orderItemTotalSumDiv">
                <div class="pull-right">
                    <span>实付款：</span>
                    <span class="orderItemTotalSumSpan">￥12,704.05</span>
                </div>
            </div>

            <div class="submitOrderDiv">
                <button type="button" class="submitOrderButton">提交订单</button>
            </div>
        </form>
    </div>
    </div>
    <!-- 订单信息结束 -->

    <!-- 底部开始 -->
    <div id="footer" class="footer" style="display: block;">

        <div id="footer_ensure" class="footer_ensure">
            <a href="#nowhere">
                <img src="img/site/ensure.png">
            </a>
        </div>

        <div id="footer_desc" class="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a>
                <a href="#nowhere">开通支付宝</a>
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a>
                <a href="#nowhere">售后规则</a>
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a>
                <a href="#nowhere">信用卡</a>
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a>
                <a href="#nowhere">商家中心</a>
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#nowhere"><img src="img/site/ma.png"></a>
            </div>

        </div>

        <div style="clear:both"></div>

        <img id="cateye" class="cateye" src="img/site/cateye.png">

        <div id="copyright" class="copyright">
            <div class="white_link">
                <a href="#nowhere">关于天猫</a>
                <a href="#nowhere"> 帮助中心</a>
                <a href="#nowhere">开放平台</a>
                <a href="#nowhere"> 诚聘英才</a>
                <a href="#nowhere">联系我们</a>
                <a href="#nowhere">网站合作</a>
                <a href="#nowhere">法律声明</a>
                <a href="#nowhere">知识产权</a>
                <a href="#nowhere"> 廉正举报 </a>
            </div>
            <div class="white_link">
                <a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span>
                <a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
                <a href="#nowhere">天猫 </a><span class="slash">|</span>
                <a href="#nowhere"> 聚划算</a><span class="slash">|</span>
                <a href="#nowhere">全球速卖通</a><span class="slash">|</span>
                <a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
                <a href="#nowhere">1688</a><span class="slash">|</span>
                <a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
                <a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
                <a href="#nowhere"> 阿里云计算 </a><span class="slash">|</span>
                <a href="#nowhere"> 阿里通信 </a><span class="slash">|</span>
                <a href="#nowhere"> YunOS </a><span class="slash">|</span>
                <a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span>
                <a href="#nowhere"> 万网 </a><span class="slash">|</span>
                <a href="#nowhere"> 高德 </a><span class="slash">|</span>
                <a href="#nowhere"> 优视 </a><span class="slash">|</span>
                <a href="#nowhere"> 友盟 </a><span class="slash">|</span>
                <a href="#nowhere"> 虾米 </a><span class="slash">|</span>
                <a href="#nowhere"> 天天动听 </a><span class="slash">|</span>
                <a href="#nowhere"> 来往 </a><span class="slash">|</span>
                <a href="#nowhere"> 钉钉 </a><span class="slash">|</span>
                <a href="#nowhere"> 支付宝 </a>
            </div>

            <div class="license">
                <span>增值电信业务经营许可证： 浙B2-20110446</span>
                <span>网络文化经营许可证：浙网文[2015]0295-065号</span>
                <span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
                <span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
                <div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
                <div>
                    <img src="img/site/copyRight1.jpg">
                    <img src="img/site/copyRight2.jpg">
                </div>
            </div>
        </div>
    </div>
    <!-- 底部结束 -->
</body>

</html>